<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>随访家园患者端</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="shortcut icon" href="/favicon.ico">
	<link rel="bookmark" href="/favicon.ico"/>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<style>
	@import './assets/css/mint-ui.css';
	@import './assets/css/common.css';
	@import './assets/css/normalize.css';
	@import './assets/css/MPreview.mobile.css';

	.msg-details-head .mint-cell:after,.msg-details-content .mint-cell:after{border: 0;}
	.msg-details-head .mint-cell-text{line-height: 22px;word-wrap:break-word;font-size: 14px;}
	.msg-details-head .mint-cell-label,.msg-details-content .mint-cell-label{text-align: right;color: #aaa;}
	.msg-details-photo{overflow: hidden;padding: 20px 0;}
	.msg-details-img{text-align: center;width: 181px;height: 181px;line-height: 181px;margin: 0 auto;}
	.msg-details-img img,.msg-details-content-title-img img{width: 100%;min-height: 100%;height: auto}
	.msg-details-photo.leh-more .msg-details-img {width: 55px;height: 55px;overflow: hidden;float: left;margin-right: 10px;line-height: 0;}
	.msg-details-content .mint-cell:before{left: 10px;}
	.msg-details-content-title{overflow: hidden;margin-bottom: 5px;}
	.msg-details-content-title-img{width: 23px;height: 23px;border-radius: 50%;overflow: hidden;float: left;text-align: center;}
	.msg-details-content-title span{font-size: 16px;line-height: 23px;margin-left: 10px;}
	.msg-details-content .mint-cell-text p{padding-left: 33px;width:100%;line-height: 20px;font-size: 14px;float: left;overflow: hidden;margin: 10px 0;}
	.msg-details-ft~.leh-wrap{padding-bottom: 58px;}
	.msg-details-ft{width: 100%;background-color:#fff;position: fixed;z-index: 5;bottom: 0;left: 0;text-align: center;}
	.msg-details-ft-type{overflow:hidden;padding: 10px;}
	.msg-details-ft-left{float: left;width: 80%;}
	.msg-details-ft-left textarea{height: 30px;width: 100%;padding: 4px;background-color:#ebecee;border-color: #d3d3d3;border-radius: 5px;line-height: 20px;}
	.msg-details-ft-right{float: left;width: 20%;text-align: center;}
	.msg-details-ft-right .icon-wx-footer-add{display: block;height: 100%;line-height: 30px;font-size: 22px;color: #aaa;}
	.msg-details-ft-send{display: inline-block;height: 30px;line-height:30px;width: 80%;border-radius:5px;background-color: #1faa2b;color:#fff;margin-left: 20%;}
	.msg-details-ft-content{overflow: hidden;width: 100%;padding:10px;border-top: 1px solid #e5e5e5;}
	.msg-details-ft-content .mint-tab-item{padding: 0;float: left;}
	.msg-details-ft-content .icon-wx-image{font-size: 20px;color: #aaa;padding: 3px;border: 1px solid #aaa; border-radius: 5px;}
	.msg-details-ft-content .mint-tab-item-label{margin-top: 5px;color: #aaa;text-align: center;}

	.msg-details-img img,.msg-details-content-title-img img{height: 100%;}

	.msg-details-title-box .mint-cell{padding-bottom: 10px;}
	.msg-details-title-box .mint-cell:before{left: 10px;}
	.msg-details-title-box .mint-cell input,.msg-details-title-box .mint-cell textarea{width: 100%;margin-top: 10px;border: 0;font-size: 16px;}
	.msg-details-title-text{width: 100%;padding:5px 0;line-height: 25px;font-size: 16px;margin-top: 10px;}

	.msgbox {
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		background-color: #fff;
		width: 85%;
		border-radius: 3px;
		font-size: 16px;
		-webkit-user-select: none;
		overflow: hidden;
		opacity: 1;
		backface-visibility: hidden;
	}
	.msgbox-header{
		padding: 15px 0 0;
		border-bottom: none;
	}
	.msgbox-content {
		padding: 10px 20px;
		min-height: 36px;
		position: relative;
		border-bottom: 1px solid #ddd;
	}
	.msgbox-close {
		display: inline-block;
		position: absolute;
		top: 14px;
		right: 15px;
		width: 20px;
		height: 20px;
		cursor: pointer;
		line-height: 20px;
		text-align: center;
	}
	.msgbox-input > input {
		border: 1px solid #dedede;
		border-radius: 5px;
		padding: 4px 5px;
		width: 100%;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		outline: none;
	}
	.msgbox-errormsg {
		color: red;
		font-size: 12px;
		min-height: 16px;
	}
	.msgbox-title {
		padding-left: 10px;
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 8px;
	}
	.msgbox-status {
		float: left;
		width: 36px;
		height: 36px;
		font-size: 36px !important;
	}
	.msgbox-status.icon-success {
		color: #94c852;
	}
	.msgbox-status.icon-warning {
		color: #ff9c00;
	}
	.msgbox-status.icon-error {
		color: #ff4248;
	}
	.msgbox-message {
		font-size: 16px;
		line-height: 36px;
		text-align: center;
		color: #999;
		margin: 0;
	}
	.msgbox-btns {
		display: flex;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 16px;
	}
	.msgbox-btn {
		display: block;
		background-color: #fff;
		border: 0;
		flex: 1;
		margin: 0;
		border-radius: 0;
	}
	.msgbox-btn:active {
		background-color: #3492e9;
		color: #fff;
		outline: none;
	}
	.msgbox-btn:focus {
		outline: none;
	}
	.msgbox-confirm {
		width: 50%;
	}
	.msgbox-cancel {
		width: 50%;
		border-right: 1px solid #ddd;
	}
	.msgbox-confirm-highlight,
	.msgbox-cancel-highlight {
		font-weight: 800;
	}
	.msgbox-btns-reverse {
		-webkit-box-direction: reverse;
	}
	.msgbox-btns-reverse .msgbox-confirm {
		border-right: 1px solid #ddd;
	}
	.msgbox-btns-reverse .msgbox-cancel {
		border-right: 0;
	}
	.pop-bounce-transition {
		transition: .2s .1s;
	}
	.pop-bounce-enter {
		opacity: 0;
		transform: translate3d(-50%, -50%, 0) scale(0.7);
	}
	.pop-bounce-leave {
		opacity: 0;
		transform: translate3d(-50%, -50%, 0) scale(0.9);
	}
</style>


<script type='text/javascript' src='http://wx.jk7.com/html/js/zepto-v1.2.0-min.js' charset='utf-8'></script>
<script type="text/javascript" src='http://wx.jk7.com/html/js/MPreview.mobile.min.js' charset='utf-8'></script>
<script type="text/javascript" src='https://res.wx.qq.com/open/js/jweixin-1.0.0.js' charset='utf-8'></script>
<script type="text/javascript" src='./assets/js/vue.min.js'></script>

<body id="note">
<header class="mint-header is-fixed leh-bg-grey-head">
	<div class="mint-header-button is-left">
		<a href="http://wx.jk7.com/user/note">
			<span class="iconfont icon-wx-arr-left leh-c-green"></span>
		</a>
	</div>
	<h1 class="mint-header-title leh-c-black">在线留言</h1>
	<div class="mint-header-button is-right"> </div>
</header>
<div class="leh-float-box" v-if="isClose" @click="toFeedback">
	<button class="mint-button mint-button--green mint-button--large" @click="saveMsgPop">
		<label class="mint-button-text leh-c-white">给医生留言</label>
	</button>
</div>
<div class="msg-details-ft" v-if="!isClose">
	<div class="msg-details-ft-type">
		<div class="msg-details-ft-left">
			<textarea maxlength="200" v-model="msg" id="msgbox"  @focus="focusTxt"></textarea>
		</div>
		<div class="msg-details-ft-right">
			<span class="iconfont icon-wx-footer-add" v-if="!addpic" @click="addPicFun"></span>
			<div class="msg-details-ft-send" v-if="addpic" @click="reback">回复</div>
		</div>
	</div>
	<div class="msg-details-ft-content" v-if="showpic">
		<a class="mint-tab-item" @click="addPic">
			<span class="iconfont icon-wx-image"></span>
			<div class="mint-tab-item-label">图片</div>
		</a>
	</div>
</div>
<div class="leh-wrap leh-bg-grey-body" id="bodybox">
	<div class="page-cell msg-details-head">

		<div class="msg-details-title-box">
			<a class="mint-cell">
				<label class="mint-cell-title">
					<span class="mint-cell-text leh-c-green">目前所患疾病</span>
					<div class="msg-details-title-text" v-text="noteDetails.disease"></div>
				</label>
				<div class="mint-cell-value"></div>
			</a>
			<a class="mint-cell">
				<label class="mint-cell-title">
					<span class="mint-cell-text leh-c-green">主诉</span>
					<div class="msg-details-title-text" v-text="noteDetails.contents"></div>
				</label>
				<div class="mint-cell-value"></div>
			</a>
			<a class="mint-cell" v-if="noteDetails.drugUse">
				<label class="mint-cell-title">
					<span class="mint-cell-text leh-c-green">用药记录</span>
					<div class="msg-details-title-text"v-text="noteDetails.drugUse"></div>
				</label>
				<div class="mint-cell-value"></div>
			</a>
		</div>

		<a class="mint-cell" v-if="noteDetails.urls">
			<label class="mint-cell-title">
				<!--<span class="mint-cell-text">{{ noteDetails.contents }}</span>-->
				<div class="msg-details-photo leh-more">
					<ul>
						<li class="msg-details-img" v-for="urls in noteDetails.urls" @click="showPic(noteDetails.urls)">
							<img :src="urls"/>
						</li>
					</ul>
				</div>
				<span class="mint-cell-label">{{ noteDetails.createtime }}</span>
			</label>
			<div class="mint-cell-value"></div>
		</a>
	</div>
	<div class="page-cell msg-details-content" v-if="noteDetails.replyList">
		<a class="mint-cell" v-for="items in noteDetails.replyList">
			<label class="mint-cell-title">
				<div class="msg-details-content-title">
					<div class="msg-details-content-title-img">
						<img :src="items.userPhoto" v-if="items.userPhoto !== null"/>
						<img src="./assets/img/private.jpg" v-if="items.userPhoto === null || items.userPhoto === ''"/>
					</div>
					<span>{{ items.userName }}</span>
				</div>
				<span class="mint-cell-text">
							<p v-if="!items.url">{{ items.content }}</p>
							<div class="msg-details-head-photo" v-if="items.url" @click="showPic(items.url)">
								<ul>
									<li class="msg-details-img">
										<img :src="items.url"/>
									</li>
								</ul>
							</div>
					</span>
				<span class="mint-cell-label">{{ items.createTime }}</span>
			</label>
			<div class="mint-cell-value"></div>
		</a>
	</div>

</div>

<!-- 用于展示插件的容器 -->
<div class="overlay" id="overlay"></div>


<!--提示框-->
<div class="msgbox-wrapper" style="position: absolute; z-index: 1005; display: none" v-show="showTips">
	<div class="msgbox pop-bounce-transition" >
		<div class="msgbox-header">
			<div class="msgbox-title">提示</div>
		</div>
		<div class="msgbox-content">
			<div class="msgbox-status d-icon"></div>
			<div class="msgbox-message"><p>留言条数已用完，是否需要购买？</p></div>
		</div>
		<div class="msgbox-btns">
			<button class="msgbox-btn msgbox-cancel " @click="handleAction(0)">取消</button>
			<button class="msgbox-btn msgbox-confirm " @click="handleAction(1)">确定</button>
		</div>
	</div>
</div>
<div class="v-modal" style="z-index: 1004;" v-show="showTips"></div>

<script>
	var vue;
	function vue_init () {
		vue = new Vue({
			el: "#note",
			data: {
				openID: '',
				doctor_id: '',
				msg: '', // 上传的内容
				url: '', // 上传的图片
				ispopup: false,
				showTips: false,
				ismsg: false,
				addpic: false,
				showpic: false,
				isClose: false, // 是否关闭留言
				form_path: '',
				ids: '', // 医生ID
				noteDetails: '', // 留言详情
				message: [],
				picItems: [], // 图片数组
				serverId: '', // 上传图片返回的serverId
				hasMessage: '',// 是否可以留言
				loadBox: '<div class="ball-beat"><div></div><div></div><div></div></div>', // 加载主体
				loadmask: '<div class="maskbox"></div>', // 加载遮罩
			},
			ready: function () {

				// 获取URL参数
				function getQueryString (key) {
					var reg = new RegExp("(^|&)"+key+"=([^&]*)(&|$)");
					var result = window.location.search.substr(1).match(reg);
					return result?decodeURIComponent(result[2]):null;
				}

				// 初始值
				this.openID = getQueryString('openID')
				this.noteDetails = '';
				this.ids = getQueryString('id')
				if(getQueryString('isclose') === 'false'){
					this.isClose = false
				}else {
					this.isClose = true
				}
				this.getPatientMessages(this.ids)


				// 上传图片，验证签名
				function pageConfig() {

					$.ajax({
						url: 'http://wx.jk7.com/api/valid',
						type: 'GET',
						dataType: "json",
						contentType: 'application/x-www-form-urlencoded',
						data: {
							pageurl: window.location.href
						},
						success: function (data) {

							wxconfig(data);
						}
					});
				}
				pageConfig()

				function wxconfig (data){
					wx.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: data.appId, // 必填，公众号的唯一标识
						nonceStr: data.nonceStr, // 必填，生成签名的随机串
						timestamp: data.timestamp, // 必填，生成签名的时间戳
						signature: data.signature, // 必填，签名，见附录1
						jsApiList: [
							'checkJsApi',
							'chooseImage',
							'previewImage',
							'uploadImage',
							'downloadImage',
							'translateVoice'
						] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
					});
				}

				wx.hideMenuItems({
					menuList: ["menuItem:share:appMessage","menuItem:share:timeline","menuItem:share:qq","menuItem:share:weiboApp","menuItem:share:facebook","menuItem:share:QZone","menuItem:copyUrl","menuItem:originPage","menuItem:openWithQQBrowser","menuItem:openWithSafari"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
				});
			},
			methods: {
				focusTxt: function () {

					setTimeout(function () {

						// 主体内容跟着输入框的改变向上滚动
						$('#bodybox')[0].scrollTop = 100000
					}, 800)
				},
				getPatientMessages: function (ids, blr) {

					var _self = this
					$.ajax({
						type: "GET",
						url: 'http://wx.jk7.com/api/patientMessages/'+ ids,
						dataType: 'json',
						beforeSend: function (data){
							var moaalBody = document.body
							$(moaalBody).append(_self.loadBox)
							$(moaalBody).append(_self.loadmask)
						},
						success: function (res) {

							$('.ball-beat').remove()
							$('.maskbox').remove()

							_self.noteDetails = res.data
							_self.hasMessage = res.data.hasMessageQuato
							_self.doctor_id = res.data.drId

							if(blr){

								setTimeout(function () {

									// 主体内容跟着输入框的改变向上滚动
									$('#bodybox')[0].scrollTop = 100000
								}, 500)
							}
						},
						error: function (XMLHttpRequest, textStatus, errorThrown) {
							alert('网络出错')
							return;
						}
					});
				},

				addPicFun: function () {

					var bdbox = $('#bodybox')

					this.msg =''
					this.showpic = !this.showpic
					if(this.showpic){
						bdbox.css('paddingBottom', '119px')
					}else{
						bdbox.css('paddingBottom', '58px')
					}
					// 主体内容跟着输入框的改变向上滚动
					bdbox[0].scrollTop = 100000
				},

				// 添加图片
				addPic: function () {

					var _self = this
					wx.chooseImage({
						count: 1, // 默认9
						sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						success: function(res) {

							var localIds = res.localIds[0].toString(); // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
							_self.photo = localIds
							_self.uploadImage(localIds)

						},
						fail: function (res) {
							alert(JSON.stringify(res));
						}
					});
				},

				uploadImage: function (localIds) {

					var _self = this
					wx.uploadImage({
						localId: localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
						isShowProgressTips: 1, // 默认为1，显示进度提示
						success: function (res) {
							_self.serverId = res.serverId; // 返回图片的服务器端ID
							_self.msg = ''
							_self.toJson()
						},
						fail: function(res) {
							alert(JSON.stringify(res));
						}
					});

				},

				// 回复
				reback: function () {

					var _self = this,
					    msgBox = $('#msgbox'),
					    scrollH = msgBox[0].scrollHeight,
					    bdbox = $('#bodybox');

					if(!_self.hasMessage){

						_self.showTips = true
					}

					_self.addpic = !_self.addpic
					msgBox.val('')  //
					msgBox.height(30)

					_self.serverId = ''
					_self.toJson()

				},

				toJson: function () {

					var _self = this
					var params = {
						"messageId": _self.ids,
						"content": _self.msg,
						"serverId": _self.serverId
					}


					// 回复留言
					$.ajax({
						type: "POST",
						url: 'http://wx.jk7.com/api/patientMessages/reply',
						data: params,
						dataType: 'json',
						beforeSend: function (data){
							var moaalBody = document.body
							$(moaalBody).append(_self.loadBox)
							$(moaalBody).append(_self.loadmask)
						},
						success: function (data) {

							$('.ball-beat').remove()
							$('.maskbox').remove()
							_self.getPatientMessages(_self.ids, true)
						},
						error: function (XMLHttpRequest, textStatus, errorThrown) {
							alert('网络出错')
							return;
						}
					});

				},

				// 查看原图
				showPic: function (url){

					this.wrapPic(url, '留言详情') // 查看图片
				},
				wrapPic: function (picArr, titName) {

					var wrap = document.querySelector('#overlay'),
							title = titName || '查看图片',
							data = [];

					if(typeof(picArr) === 'string'){
						data.push(picArr)
					}else if(typeof(picArr) === 'object'){
						data = picArr
					}else {
						console.log('图片变量类型必须为string或object' + typeof(picArr))
					}
					wrap.className = wrap.className + ' in';

					// 延迟初始化插件是为了让CSS动画走完
					setTimeout(function() {
						MPreview({
							data: data,
							title: title,
							direction: 'left',
							wrap: '#overlay',
							init: function() {
							},
							close: function() {
								wrap.className = wrap.className.replace(' in', '');
							}
						});
					}, 400);

				},

				// 返回留言中心
				toFeedback: function () {
					window.location.href='http://wx.jk7.com/html/pay/vue_msg_v.html?openID='+ this.openID;
				},

				// 提示框事件
				handleAction: function (blr) {

					if(blr){
						// 确定
						this.showTips = false
						window.location.href='http://wx.jk7.com/html/pay/vue_pay_v.html?drid='+this.doctor_id+'&openID='+this.openID
					}else{
						// 取消
						this.showTips = false
					}
				},

			},
			watch: {
				msg : function (newVal) {
					if(newVal !== ''){
						this.addpic = true
						this.showpic =false
					}else {
						this.addpic = false
					}

					// 输入框根据字符自动增高
					var msgBox = $('#msgbox'),
					    scrollH = msgBox[0].scrollHeight,
					    bdbox = $('#bodybox');

					msgBox.height(scrollH)
					/*
					 * 输入框默认高度 30px
					 * 外框高度为20px 灰边8px
					 */
					if(scrollH > 30){
						bdbox.css('paddingBottom', 28 + scrollH +'px')
					}else {
						bdbox.css('paddingBottom', '58px')
					}
					// 主体内容跟着输入框的改变向上滚动
					bdbox[0].scrollTop = 100000
				}
			}
		});

	}
	vue_init()




</script>



</body>
</html>
